<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<title>选择省份</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui-win.css" />
	<style type="text/css">
		#city_li li{
			width: 90%;
			height:40px;
			border-bottom:1px solid #e6e6e6;
			line-height: 40px;
			font-size: 18px;
			font-family: "微软雅黑";
			text-indent: 1em;
			color: black;
		}
		.city_li_zimu{
			font-weight: bold;
			background: #ccc;

		}
		.search{
			width: 100%;
			height: 50px;
			position: fixed;
			top: 45px;
			background:white;
		}
		.search input{
			width: 85%;
			height: 31px;
			float: left;
			margin:10px 0 0 5%;
			border: 1px solid #ccc;
			padding-left: 5%;
			border-radius: 15px;
			outline: none;
		}
		.diyu{
			height: 40px;
			width: 100%;
			background: #ccc;
			position: fixed;
			top: 95px;
			text-indent: 1em;
			line-height: 40px;
			font-weight: bold;
		}
		.changyong{
			height: 45px;
			width: 90%;
			background: white;
			position: fixed;
			top: 135px;
		}
		.celan{
			background: #ccc;
			width: 10%;
			position: fixed;
			top: 135px;
			right: 0;
		}
		.celan li{
			text-align: center;
			font-family: "微软雅黑";
			font-weight: bold;
		}
		.celan li:hover{
			color: #00abfd;
		}
		.search_button{
			position: absolute;
			right: 8%;
			top:10px;
			width: 32px;
			height: 32px;
			background:url(../../image/home/busess/search.png) no-repeat center center ; 
		}
		.changyong li{
			width: 17%;
			height: 25px;
			margin-left: 2.5%;
			float: left;
			background: red;
			border-radius: 25px;
			margin-top: 12.5px;
			text-align: center;
			line-height: 25px;
			color: white;
			font-family: "微软雅黑";
			font-size: 13px;
		}
	</style>
</head>
<body>
	<header class="aui-bar aui-bar-nav aui-bar-yunzo" id="aui-header">
		<a class="aui-btn aui-bar-yunzo aui-pull-left" id="back" onclick="back_go()"> <span class="aui-iconfont aui-icon-left"></span></a>
		<div class="aui-title" id="title">
			选择省份
		</div>
	</header>
	<div class="search">
		<input type="text" placeholder="请输入城市名" id="sousuo">
		<div class="search_button" onclick="fun1()"></div>
	</div>
	<p class="diyu">常用地域</p>
	<ul class="changyong">
		<li style="background:#00abfd;" class="city1"></li>
		<li style="background:#24c29f;" class="city2"></li>
		<li style="background:#fc8800;" class="city3"></li>
		<li style="background:#00abfd;" class="city4"></li>
		<li style="background:#24c29f;" class="city5"></li>
	</ul>
	<div class="celan">
		
	</div>
	<div class="margin_div" style="height:180px;"></div>
	<ul id="city_li">
	</ul>
	<div id="div"></div>
	<script src="../../script/jquery-1.10.2.min.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript">
		$(".city1").html(localStorage.city1);
		$(".city2").html(localStorage.city2);
		$(".city3").html(localStorage.city3);
		$(".city4").html(localStorage.city4);
		$(".city5").html(localStorage.city5);
		var city1;
		var city2;
		var city3;
		var city4;
		var city5;
		var str1="";
		var str="";
		var city_li=$("#city_li");
		var city_arr=["A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","W","X","Y","Z"];
		city_arr["A"]=["鞍山","安阳","安庆","安康","阿克苏","安顺","阿勒泰","阿拉善","阿坝","阿里","阿拉尔","澳门"]
		city_arr["B"]=["北京","保定","滨州","包头","宝鸡","本溪","蚌埠","北海","巴彦淖尔","白城","白山","亳州","巴中","白银","百色","毕节","巴音郭楞","保山","博尔塔拉"]
		city_arr["C"]=["成都","重庆","长沙","长春","常州","沧州","赤峰","承德","常德","长治","郴州","滁州","巢湖","潮州","昌吉","池州","楚雄","崇左","昌都","朝阳","常熟","慈溪"]
		city_arr["D"]=["大连","东莞","德州","东营","大庆","大同","丹东","儋州","德阳","达州","大理","大兴安岭","定西","德宏","迪庆","钓鱼岛"]
		city_arr["E"]=["鄂尔多斯","恩施","鄂州"]
		city_arr["F"]=["福州","佛山","抚顺","阜阳","抚州","防城港"]
		city_arr["G"]=["广州","贵阳","桂林","赣州","广元","广安","贵港","固原","甘南","甘孜","果洛"]
		city_arr["H"]=["杭州","惠州","哈尔滨","合肥","呼和浩特","海口","邯郸","菏泽","衡水","淮安","衡阳","葫芦岛","淮南","汉中","怀化","淮北","黄冈","湖州","黄石","呼伦贝尔","河源","鹤壁","鹤岗","黄山","红河","河池","哈密","黑河","贺州","海西","和田","海北","海东","黄南"]
		city_arr["J"]=["济南","济宁","吉林","锦州","金华","嘉兴","江门","荆州","焦作","晋中","佳木斯","九江","晋城","荆门","鸡西","吉安","揭阳","景德镇","济源","酒泉","金昌","嘉峪关","胶州","即墨"]
		city_arr["K"]=["昆明","开封","喀什","卡拉玛依","库尔勒","克孜勒苏","昆山"]
		city_arr["L"]=["兰州","拉萨","廊坊","临沂","洛阳","聊城","柳州","连云港","临汾","漯河","辽阳","乐山","泸州","六安","娄底","莱芜","龙岩","吕梁","丽水","凉山","丽江","六盘水","辽源","来宾","临沧","陇南","临夏","林芝"]
		city_arr["M"]=["绵阳","牡丹江","茂名","梅州","马鞍山","眉山"]
		city_arr["N"]=["南京","宁波","南宁","南昌","南通","南阳","南充","内江","南平","宁德","怒江","那曲"]
		city_arr["P"]=["平顶山","濮阳","盘锦","莆田","攀枝花","萍乡","平凉","普洱","郫县"]
		city_arr["Q"]=["青岛","琼海","秦皇岛","泉州","齐齐哈尔","清远","曲靖","衢州","庆阳","七台河","钦州","潜江","黔东南","黔南","黔西南"]
		city_arr["R"]=["日照","日喀则"]
		city_arr["S"]=["上海","深圳","沈阳","石家庄","苏州","汕头","商丘","三亚","宿迁","绍兴","十堰","四平","三门峡","邵阳","上饶","遂宁","三明","绥化","石河子","宿州","韶关","松原","随州","汕尾","双鸭山","朔州","石嘴山","商洛","神农架","山南","双流"]
		city_arr["T"]=["天津","太原","唐山","泰安","台州","泰州","铁岭","通辽","通化","天水","铜陵","铜川","铜仁","天门","塔城","吐鲁番","图木舒克"]
		city_arr["W"]=["武汉","无锡","乌鲁木齐","威海","潍坊","温州","芜湖","渭南","乌海","梧州","乌兰察布","武威","文山","吴忠","五家渠","五指山"]
		city_arr["X"]=["西安","厦门","西宁","徐州","咸阳","邢台","襄阳","新乡","湘潭","许昌","信阳","孝感","忻州","咸宁","新余","宣城","仙桃","锡林郭勒","湘西","兴安","西双版纳","香港"]
		city_arr["Y"]=["银川","宜昌","烟台","扬州","盐城","营口","岳阳","运城","榆林","宜宾","阳泉","延安","益阳","永州","玉林","宜春","阳江","延边","玉溪","伊犁","云浮","伊春","雅安","鹰潭","玉树","义务"]
		city_arr["Z"]=["郑州","珠海","淄博","中山","枣庄","张家口","株洲","镇江","周口","湛江","驻马店","肇庆","自贡","遵义","漳州","舟山","张掖","资阳","张家界","昭通","中卫"]
		var city_arr2=new Array();
		for(var i=0;i<city_arr.length;i++){
			city_arr2=city_arr[city_arr[i]];
			for(var j=0;j<city_arr2.length;j++){
				str1+='<li onclick="funnn(\'' +city_arr2[j] + '\')">'+city_arr2[j]+'</li>'
			}
			str+='<li class="city_li_zimu">'+city_arr[i]+'</li>'+str1;
			str1="";
		}
		city_li.html(str);
		var ch1=document.documentElement.clientHeight-135;
		$(".celan").css("height",ch1+"px")
		var sttr="";
		for(var k=0;k<city_arr.length;k++){
			sttr+='<li onclick="fun(\'' +city_arr[k] + '\')">'+city_arr[k]+'</li>';
		}
		var ch2=ch1/city_arr.length;
		$(".celan").html(sttr);
		$(".celan li").css("height",ch2+"px");
		$(".celan li").css("line-height",ch2+"px")
		function fun(num){
			var li1=document.getElementById("city_li");
			var aA=li1.getElementsByTagName('li');
			$("#city_li li").css("color","black")
			for(var i=0;i<aA.length;i++){
				if(aA[i].innerHTML==num){
					$(document).scrollTop(aA[i].offsetTop-180)	
					aA[i].style.color="#00abfd";
				}
			}
		}
		function fun1(){
			var city_name=$("#sousuo").val();
			fun(city_name);
		}
		function funnn(n){
			if(n!=$(".city1").html()&&n!=$(".city2").html()&&n!=$(".city3").html()&&n!=$(".city4").html()&&n!=$(".city5").html()){
				$(".city1").html($(".city2").html())
				$(".city2").html($(".city3").html())
				$(".city3").html($(".city4").html())
				$(".city4").html($(".city5").html())
				$(".city5").html(n)			
				city1=$(".city1").html()
				city2=$(".city2").html()
				city3=$(".city3").html()
				city4=$(".city4").html()
				city5=$(".city5").html()
				var localData =  window.localStorage;
        		localData.setItem("city1",city1);
        		localData.setItem("city2",city2);
        		localData.setItem("city3",city3);
        		localData.setItem("city4",city4);
        		localData.setItem("city5",city5);
			}
			else{
				alert("您已经选择过了该城市！")
			}
		}
	</script>
</body>
</html>